<template>
  <div class="hot_game_list" :style="{
    gridTemplateColumns: getGridColumns(),
    gap: props.type == 1 ? '1px' : '8px'
  }">
    <div :class="[(type == 3 || type === 4) ? 'all_game1' : 'all_game']" v-for="(gameItem, index) in props.games"
      :key="index">
      <template v-if="[3, 4].includes(type)">
        <div @click="toGameDetail(gameItem)">
          <div class="game_hot" v-if="gameItem.is_hot === 1">
            <iconpark-icon name="hot" size=".8rem"></iconpark-icon>
            <span>HOT</span>
          </div>
          <img w-full h-full class="bg_img" :src="joinURL(settings.backend_upload, gameItem.tournm_logo)" fit="cover" />
          <div class="game_name">
            {{ gameItem.tournm_name }}
          </div>
        </div>
      </template>
      <template v-else>
        <div @click="toGameDetail(gameItem)">
          <div class="game_hot" v-if="gameItem.is_hot === 1">
            <iconpark-icon name="hot" size=".8rem"></iconpark-icon>
            <span>HOT</span>
          </div>
          <imgT w-full h-full class="bg_img" :key="gameItem.picture_h5"
            :src="joinURL(settings.backend_upload, gameItem.picture_h5)" alt="" />
          <iconpark-icon class="collect_img" v-if="isLocalLoggedIn"
            :name="allCollected.includes(gameItem.id) ? 'shoucang-sel' : 'shoucang-def'" size="20"
            @click.stop="reqCollect(gameItem, allCollected)"></iconpark-icon>
          <div class="game_name">
            {{ unserialize(gameItem.name, false) }}
          </div>
        </div>
        <div v-if="gameItem.ismMintain === 1" class="masking_layer">
          <iconpark-icon class="maskin_img" name="padlock1" size="28" />
          <span>{{ t('inside_page_game_coming_soon') }}</span>
          <span>{{ t('inside_page_game_stay_tuned') }}</span>
        </div>
      </template>
    </div>
  </div>
</template>


<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { User } from '@/store/user';
import { Page } from '@/store/page';
import { reqCollect } from '@/utils/useNetMethods';
import pinia from '@/store';
import { unserialize, onPlayGame } from '@/utils/useStoreMethods';
import { useRouter } from "vue-router";
const router = useRouter();
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const { isLocalLoggedIn, allCollected } = storeToRefs(User(pinia));
import { joinURL } from '@/utils/publicMethods'

const { lang, settings } = storeToRefs(Page(pinia));

// 接收传入的 props
const props: any = defineProps({
  games: {
    type: Array,
    required: true,
  },
  type: {
    type: Number,
    default: 2,
  },
  gameWidth: {
    type: Number,
    default: 82,
  },
  gameHeight: {
    type: Number,
    default: 108,
  },
  defaultImage: {
    type: String,
    default: '/imgs/home/cunkuan.png',
  },
});


// 动态设置列数
const getGridColumns = () => {
  if (props.type === 1) {
    return 'repeat(4, 1fr)';
  } else if (props.type === 3 || props.type === 4) {
    return 'repeat(2, 1fr)';
  } else {
    return 'repeat(4, 1fr)';
  }
};

// watch(
//   () => props.type,
//   (newId) => {
//     nextTick(() => {
//       console.log('Type类型', newId)
//     })
//   },
//   { immediate: true }
// )

// 判读是否是进入游戏二级页或者直接进入游戏
const toGameDetail = async (item: any) => {
  if (props.type === 3 || props.type === 4) {
    // showToast.text(t("not_open"))
    router.push({
      path: "/club/eventDetails",
      query: {
        roomId: item.room_id,
      },
    });
  } else {
    if (item.has_next == 1) {
      // 跳转二级页面
      router.push({
        path: 'gameDetail',
        query: {
          agent_id: item.id,
          venue_id: item.three_game_kind[0].id,
          has_next: item.has_next,
          name: item.name[lang.value].toUpperCase(),
        }
      })
    } else {
      onPlayGame(item)
    }
  }
}

</script>


<style lang="scss" scoped>
.hot_game_list {
  width: 347px;
  margin: 0 auto;
  display: grid;
  gap: 1px;

  .all_game {
    width: 82px;
    height: 108px;
    // margin-right: 6px;
    margin-bottom: 6px;
    background: #1A1944;
    border-radius: 8px;
    position: relative;

    .game_hot {
      // width: 38px;
      height: 15px;
      position: absolute;
      padding: 0 8px 0 4px;
      left: 0px;
      top: 0px;
      z-index: 9;
      background: url(/imgs/home/is_hot.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;

      .game_hot_icon {
        width: 8px;
        height: 10px;
        margin: 0 2px;
      }

      span {
        color: #FFFFFF;
        font-size: 8px;
        font-family: PingFang SC;
      }
    }

    .bg_img {
      width: 82px;
      height: 82px;
    }

    .game_name {
      width: 100%;
      height: 26px;
      text-align: center;
      transform: translateY(-6px);
      color: #fff;
      font-size: 12px;
      overflow: hidden;
      word-break: break-word;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .collect_img {
      position: absolute;
      top: 4px;
      right: 4px;
    }

    .masking_layer {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      backdrop-filter: blur(1px);
      background: rgba(0, 0, 0, 0.6);
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: 500;
      line-height: 18px;
      color: #ffffff;

      .maskin_img {
        width: 32px;
        height: 32px;
        margin-bottom: 8px;
      }
    }
  }

  .all_game1 {
    width: 168px;
    height: 108px;
    border-radius: 8px;
    background: #1A1944;

    .bg_img {
      width: 168px;
      height: 82px;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }

    .game_name {
      width: 90%;
      height: 26px;
      line-height: 26px;
      margin-top: 0px;
      color: #fff;
      text-align: center;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
    }
  }
}
</style>
